<template>
  <div class="course">
    <p class="tit">精选好课</p>
    <div class="course_list">
      <div class="item" @click="skip(item.id)" v-for="item in list" :key='item.id'>
        <img :src="item.coverImg|upImg" alt="" />
        <p>{{item.name}}</p>
        <p class="start">
          <van-rate
            :readonly="true"
            color="#33b17b"
            size="12px"
            v-model="item.star"
            allow-half
            void-icon="star"
            void-color="#eee"
          />
          <span class="fen">{{ item.star}}</span>
          <span class="pingl">{{item.xueguo>'9999+'?'9999+':item.xueguo}}人已学</span>
        </p>
        <p class="price">￥666</p>
      </div>
     
      <div class="item item_bottom" @click="skip(hotCourse.id)">
        <img src="../../assets/image/p.png" alt="" />
        <p>{{hotCourse.name}}</p>
        <p class="start">
          <van-rate
            :readonly="true"
            color="#33b17b"
            size="12px"
            v-model="hotCourse.star"
            allow-half
            void-icon="star"
            void-color="#eee"
          />
          <span class="fen">{{ hotCourse.star}}</span>
          <span class="pingl">{{hotCourse.xueguo>'9999+'?'9999+':hotCourse.xueguo}}人已学</span>
        </p>
        <p class="price">￥666</p>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/scss/course.scss";
import {get} from '../../tools/request'
export default {
  data() {
    return {
      value: 2.5,
      list:'',
      hotCourse:'',
    };
  },
  methods:{
    skip(id){
     this.$router.push({name:'courseDetail',query:{id}})
    }
  },
  created(){
    get('/api/l1/course').then(r=>{
      
      this.list=r.data.splice(0,5)
      this.hotCourse=this.list.pop()
    })
  }
  
};
</script>

<style></style>
